{% extends "start.html" %}
{% block content %}
<script language="JavaScript" type="text/javascript">
    
    function toggle_inline(nr) {
        displayNew = (document.getElementById(nr).style.display == 'none') ? 'inline' : 'none';
        document.getElementById(nr).style.display = displayNew;
    }
    function toggle_block(nr) {
        displayNew = (document.getElementById(nr).style.display == 'none') ? 'block' : 'none';
        document.getElementById(nr).style.display = displayNew;
    }
    function view_image_click() {
        toggle_inline('wordlist'); 
        toggle_inline('image_wrapper'); 
        toggle_block('pagination');
        toggle_inline('image_control');
        document.getElementById('kwic_editbox').innerHTML = 
            (document.getElementById('eebo_button').value == 'View EEBO Image') 
                                ? document.getElementById('kwic_wordlist').innerHTML : 
                                '';
        document.getElementById('eebo_button').value 
             = (document.getElementById('eebo_button').value == 'View EEBO Image') 
                ? 'Hide EEBO Image' : 
                'View EEBO Image';
        document.getElementById('eebo_image').src = 'media/{{ current_word.get_image_url }}.png';
    }
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="media/js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="media/js/jquery-panzoom.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
        function initPanZoom() {
          $('#image_div img').panZoom({
            'zoomIn'    : $('#zoomin'),
            'zoomOut'   : $('#zoomout'),
            'panUp'     : $('#panup'),
            'panDown'   : $('#pandown'),
            'panLeft'   : $('#panleft'),
            'panRight'  : $('#panright'),
            'fit'       : $('#fit'),
            'destroy'   : $('#destroy'),
            'directedit': true,
            'debug'     : false,
            'aspect'    : true,
            'mousewheel': true,
          });
        };

        initPanZoom();

       });
</script>
<div id="main">
  <div id="leftbar">
  <div id="search">
    <form action="" method="POST">
    <table>
    {{ searchform.as_table }}
    <tr><td></td><td><input type="submit" name="which_post" value="Search" id="submit"></td></tr>

    <tr><td>
    <div id="searchform_errors" style="color: red;">
            {% if searchform.errors %}
            <p>
                Please correct the error{{ searchform.errors|pluralize }} below.
            </p>
            <ul>
            {% for field in searchform %}
              {% if field.errors %}
                <li>{{ field.label }} <strong>{{ field.errors }}</strong></li>
               {% endif %}
            {% endfor %}
            </ul>
            {% endif %}
    </div>
    </td></tr>
    </table>
    </form>
  </div>
  <div id="editbox">
    <form action="" method="POST">
        <h4 style="margin:6px">Edit word {{ current_word.citation }} {% if current_word.text_name %} from <i>{{ current_word.text_name }}</i> {% endif %}</h4>
        <p style="margin:12px; font-size:8pt" id="kwic_editbox"></p>
        <table>
        <tr>
        <td>
     {% if user.is_authenticated %}
     {% if current_word.text_name %}
<!-- 
         <input type="button" 
                       value="View EEBO Image" 
                       onClick="window.open('media/{{ current_word.get_image_url }}.png','EEBO Image','width=1250,height=850,left=250')" />
-->
         <input id="eebo_button" type="button" 
                       value="View EEBO Image" 
                       onclick="view_image_click();" />
     {% endif %}
     {% endif %}
        </td>
        <td>
        </td>
        </tr>
        </table>
        <table>
        <col align="right"/>
        <col align="left"/>
        <col align="right"/>
        <thead>
        <tr>
          <td>
        </td>
        <td align="left">New values</td>
        <td>
        </td>
        </tr>
        <tr>
        </thead>
        <tbody>
        <tr><td>Spelling ({{ current_word.spelling }}):</td><td>{{ editform.spelling_to }}</td>
        </tr>
        <tr>
        <td>Lemma ({{ current_word.lemma }}):</td> <td> {{ editform.lemma_to }}</td>
        </tr>
        <tr>
        <td>POS ({{ current_word.pos }}):</td> <td>{{ editform.pos_to }}</td>
        </tr>
        </tbody>
        </table>
        <table>
        <tr><td colspan="3">Annotation:</td></tr>
        <tr><td colspan="3">{{ editform.annotation }}</td></tr>
        <tr><td>{{ editform.operation }}</td>
            <td><input type="submit" name="which_post" value="Save" id="submit"></td>
            <td></td>
        </tr>
        </table>
        <div id="editbox_errors" style="color: red;">
            {% if editform.errors %}
            <p>
                Please correct the error{{ editform.errors|pluralize }} below.
            </p>
            <ul>
            {% for field in editform %}
              {% if field.errors %}
                <li>{{ field.label }} <strong>{{ field.errors }}</strong></li>
               {% endif %}
            {% endfor %}
            </ul>
            {% endif %}
        </div>
      <input type="hidden" name="wordid_from" value="{{ current_word.wordid }}" />
      <input type="hidden" name="spelling_from" value="{{ current_word.spelling }}" />
      <input type="hidden" name="lemma_from" value="{{ current_word.lemma }}" />
      <input type="hidden" name="pos_from" value="{{ current_word.pos }}" />
    </form>
  </div> <!-- editbox -->

  <div id="image_control" style="display: none">
    <table>
      <tr><td style="text-align: right;"><a id="zoomin" href="#">Zoom In</a></td>
      <td></td>
      <td style="text-align: center;"><a id="panup" href="#">Pan Up</a></td>
      <td></td>
      </tr>
      <tr><td style="text-align: right;"><a id="zoomout" href="#">Zoom Out</a></td>
      <td style="text-align: right;"><a id="panleft" href="#">Pan Left</a></td>
      <td></td>
      <td style="text-align: left;"><a id="panright" href="#">Pan Right</a></td>
      </tr>
      <tr><td style="text-align: right;"><a id="fit" href="#">Reset</a></td>
      <td></td>
      <td style="text-align: center;"><a id="pandown" href="#">Pan Down</a></td>
      <td></td>
      </tr>
      </table>
  </div> <!-- image_control -->
  </div> <!-- leftbar -->
  <div id="wordlist">
    <table class="wordlist">
    {% if words %}
      <col />
      <col />
      <col />
      <col />
      <col />
      <col />
      <thead>
        <tr>
          <th>Spelling in Context</th>
          <th>Spelling</th>
          <th>Lemma</th>
          <th>POS</th>
    <!--      <th>Frequency</th> -->
          <th>Edit</th>
<!--          <th>Monk</th> -->
        </tr>
      </thead>
      <tbody>
      {% for word in words.object_list %}
        <tr{% ifequal word.wordid current_word.wordid %} style="background-color: #99ccff;"{% endifequal %}>
          <td{% ifequal word.wordid current_word.wordid %} id="kwic_wordlist"{% endifequal %}>{{ word.KwicL }} <b style="color: red;">{{ word.spelling }}</b> {{ word.KwicR }}</td>
          <td>{{ word.spelling }}</td>
          <td>{{ word.lemma }}</td>
          <td>{{ word.pos }}</td>
    <!--      <td>{{ word.spellcolfreq }}</td> -->
          <td>
            <form action="" method="post">
              <input type="hidden" name="wordid_from" value="{{ word.wordid }}" />
              <input type="hidden" name="spelling_from" value="{{ word.spelling }}" />
              <input type="hidden" name="lemma_from" value="{{ word.lemma }}" />
              <input type="hidden" name="pos_from" value="{{ word.pos }}" />
              <input type="hidden" name="citation" value="{{ word.citation }}" />
              <input type="hidden" name="text_name" value="{{ word.text_name }}" />
              <input type="submit" name="which_post" value="Edit" />
            </form>
          </td>
<!--
          <td>
          <form><input type="button" value="Text" onClick="window.open('http://scribe.at.northwestern.edu:8090/monk/servlet?op=wordInfo&tag={{ word.wordid }}','Monk Text','width=800,height=700,left=250')" /></form> 
          </td>
-->
        </tr>
    
      {% endfor %}
      </tbody>
    {% else %}
    <tr><td>Welcome to AnnoLex, an application for the correction and annotation of lexical data in Early 
Modern texts.  Enter your search criteria in the form at the upper left to obtain a list of uncorrected
spelling, lemma, and part-of-speech identifications in context.
</td></tr>

    {% endif %}
    </table>
  </div> <!-- wordlist -->
  <div id="image_wrapper" style="display: none;">
    <table class="wordlist">
     <tr><td><div id="image_div" style="width: 1000px; height: 700px; overflow: hidden;"><img id="eebo_image" src="media/empty_1000x700.png" alt="EEBO Image Missing"/></div></td></tr>
    </table>
    
  </div> <!-- image_div -->
</div> <!-- main -->
<div id="pagination" class="pagination" align="right">
    {% if words %}
    <span class="step-links">
        {% if words.has_previous %}
            <a href="?page=1">First</a> &middot;
            <a href="?page={{ words.previous_page_number }}">Previous</a> &middot;
        {% endif %}

        <span class="current">
            Page {{ words.number }} of {{ words.paginator.num_pages }}
        </span>

        {% if words.has_next %}
            &middot; <a href="?page={{ words.next_page_number }}">Next</a>
            &middot;<a href="?page=last">Last</a>
        {% endif %}
    </span>
    {% endif %}
</div>

{% endblock %}